<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="as" id="hjfd">
		123
		<!-- 数字和空格符算是一起的一个节点 This is comment 注释算一个节点 -->
		<span></span>
		<strong>
			<span>1</span>
		</strong>
	</div>

	<script type="text/javascript">
		var strong = document.getElementsByTagName('strong')[0];
		console.log(strong);
		console.log(strong.parentNode);
		console.log(strong.parentNode.parentNode.parentNode.parentNode);//document
		console.log(strong.parentNode.parentNode.parentNode.parentNode.parentNode);//null

		var div = document.getElementsByTagName('div')[0];
		console.log(div.childNodes);//子节点们
		console.log(div.childNodes.length);

		console.log(div.fristChild);
		console.log(div.lastChild);//#text
		console.log(div.nextSibling);//后一个兄弟节点
		console.log(div.previousSibling);
		console.log(div.nextSibling.previousSibling);

		console.log(div.parentElement);
		console.log(div.parentElement.parentElement.parentElement);//没有document

		console.log(div.children);

		console.log(div.nextElementSibling);
		console.log(div.previousElementSibling);

		console.log(div.childNodes[0].nodeName);//文本的名是#text
		console.log(div.childNodes[1].nodeName);//注释的名是#comment 
		console.log(div.childNodes[3].nodeName);

		console.log(div.childNodes[3].nodeType);

		console.log(div.attributes);

		console.log(div.hasChildNodes());

		function retElementChild(node){
			//no children 
			var temp = {
				length : 0,
				push : Array.prototype.push,
				splice : Array.prototype.splice
			},
				child = node.childNodes,
				len = child.length

			for(var i = 0; i < len; i ++){
				if(child[i].nodeType === 1){
					temp.push(child[i]);
				}
			}
			return temp;
		}
	</script>
</body>
</html>
遍历节点树
parentNode --> 父节点（最顶端的parentNode为#document）;
childNodes --> 子节点们
firstChild -->第一个子节点
lastChild --> 最后一个子节点
nextSibling --> 后一个兄弟节点
previousSibling 	前一个兄弟节点

基于元素节点树的遍历
parentElement	返回当前元素的父元素节点（IE不兼容）
children 返回当前元素的元素子节点 除了children都是IE9及一下不兼容
firstElementChild 第一个元素节点
lastElementChild最后一个元素节点
nextElementSibling	下一个兄弟元素节点
previousElementSibling	上一个兄弟元素节点

节点的四个属性
nodeName 元素标签名，以大写形式表示，只读
nodeValue	Text节点或Comment节点的文本内容
nodeType	该节点的类型，只读
attributes	Element节点的属性集合
节点的一个方法Node.hasChildNodes, 是否有子节点们，返回true或false

节点的类型
元素节点		1
属性节点		2
文本节点		3
注释节点 	8
document 	9
DocumentFragement	11